<script setup>

import router from "@/router/index.js";
</script>

<template>
<div class="assess-box">
  <div style="font-size: 18px">心理测评报告</div>
  <div class="report-box">
    <div class="scale-name-box">情绪自评量表</div>
    <div class="finish-status-box">2025.9.26已完成</div>
  </div>
  <div class="report-box">
    <div class="scale-name-box" @click="router.push('/user/profile/mental/report')">症状自评(sCL-90)</div>
    <div class="finish-status-box">2025.8.20已完成</div>
  </div>
  <div class="report-box">
    <div class="scale-name-box">时间自我监控量表</div>
    <div class="finish-status-box">2025.8.15已完成</div>
  </div>
</div>
</template>

<style scoped>
.assess-box {
  padding: 10px 0px 0px 20px;
}
.report-box {
  margin-top: 26px;
  display: flex;
  align-items: center;
}
.scale-name-box {
  display: flex;
  justify-content: center;
  padding-top: 16px;
  width: 200px;
  height: 70px;
  background-image: url('@/assets/images/user/profile/mental/心理测评报告文字背景.png');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  color: white;
  font-size: 19px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.scale-name-box:hover {
  width: 250px;
}
.finish-status-box {
  margin-left: 20px;
}
</style>